<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link rel="stylesheet" th:href="@{/frontstatic/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/global.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/swiper.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/styles.css}">
    <script charset="UTF-8" th:src="@{/frontstatic/js/jquery.1.12.4.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/jquery.DJMask.2.1.1.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <link media="all" rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}">
    <script charset="utf-8" th:src="@{/lib/layui-v2.6.3/layui.js}"></script>
    <script th:src="@{/js/template-web.js}"></script>
    <title>商品详情</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{head::headdeg}"></div>
<div class="content inner">
    <section class="item-show__div item-show__head clearfix" style="background-color: #FFFFFF;margin-top: 50px;border-radius: 8px;height: auto">
        <div class="pull-left" style="margin-top: 80px">
            <div class="item-pic__box" id="magnifier">
            </div>
            <div class="item-info__box">
                <div class="item-title">

                </div>
                <div>
                    <div style="font-size: 20px" th:text="${commotity.name}">商品名称无法加载</div>
                    <div style="font-size: 18px;color: #FF6700;margin-top: 20px">
                        <span class="price" th:text="${commotity.price}">商品价格无法加载 <s class="fz16 c9">￥24.00</s></span>
                    </div>
                </div>
                <ul class="item-ind-panel clearfix" id="countsSale" style="margin-top: 10px">

                </ul>
                <div class="item-key" style="height: 100%">

                    <div class="item-sku">
                        <dl class="item-prop clearfix" id="commdityHrspecs">
                            <dd>
                                <ul data-property="规格" th:each="item : ${specs}">
                                    <li>
                                        <a href="javascript:;" th:id="${item.id}">
                                            <span th:text="${item.cSku}"></span>
                                        </a>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                    </div>
                    <div class="item-amount clearfix bgf5">
                        <div class="item-metatit">数量：</div>
                        <div class="amount-box">
                            <div class="amount-widget">
                                <input class="amount-input" id="inputcount" maxlength="8" title="请输入购买量" type="text"
                                       value="1">
                                <div class="amount-btn">
                                    <a class="amount-but add"></a>
                                    <a class="amount-but sub"></a>
                                </div>
                            </div>
                            <div class="item-stock"><span style="margin-left: 10px;">库存 <b
                                    id="commditiStock">0</b> 件</span></div>
                            <script>
                                $(function () {
                                    $('.amount-input').onlyReg({reg: /[^0-9]/g});
                                    var stock = parseInt($('#Stock').html());
                                    $('.amount-widget').on('click', '.amount-but', function () {
                                        var num = parseInt($('.amount-input').val());
                                        if (!num) num = 0;
                                        if ($(this).hasClass('add')) {
                                            if (num > stock - 1) {
                                                return DJMask.open({
                                                    width: "300px",
                                                    height: "100px",
                                                    content: "您输入的数量超过库存上限"
                                                });
                                            }
                                            $('.amount-input').val(num + 1);
                                        } else if ($(this).hasClass('sub')) {
                                            if (num == 1) {
                                                return DJMask.open({
                                                    width: "300px",
                                                    height: "100px",
                                                    content: "您输入的数量有误"
                                                });
                                            }
                                            $('.amount-input').val(num - 1);
                                        }
                                    });
                                });
                            </script>
                        </div>
                    </div>
                    <div class="item-action clearfix bgf5">
                        <a style="margin-left: 345px" class="btnpulic" href="javascript:;" id="shopcommtity" title="将所选物品加入购物车">加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="item-show__div item-show__body posr clearfix" style="background-color: #FFFFFF;border-radius: 5px">
        <div class="item-nav-tabs">
            <ul class="nav-tabs nav-pills clearfix" id="item-tabs" role="tablist">
                <li class="active" role="presentation"><a aria-controls="detail" aria-expanded="true" data-toggle="tab" href="#detail" role="tab">商品详情</a></li>
                <li role="presentation"><a aria-controls="evaluate" data-toggle="tab" href="#evaluate" role="tab">累计评价</a></li>
            </ul>
        </div>
        <div class="pull-left">
            <div class="tab-content">
                <div aria-labelledby="detail-tab" class="tab-pane fade in active" id="detail" role="tabpanel">
                    <!--						商品详情-->
                    <div class="rich-text" id="commdityText"></div>
                </div>
                <div aria-labelledby="evaluate-tab" class="tab-pane fade" id="evaluate" role="tabpanel">


                </div>
                <div id="demo2" style="margin-left: 300px"></div>
            </div>
        </div>
    </section>
</div>
<script>
    $(document).ready(function () {
        $('#descCate').smartFloat(0);
        $('.dc-idsItem').click(function () {
            $(this).addClass('selected').siblings().removeClass('selected');
        });
        $('#item-tabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            $('#descCate #' + $(e.target).attr('aria-controls') + '-tab')
                .addClass('in').addClass('active').siblings()
                .removeClass('in').removeClass('active');
        });
    });
</script>
</section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
</body>
<!-- 评价信息 -->
<script id="eavteListTemplate" type="text/template">
    {{each datebate value}}
    <div class="evaluate-content" >
        <div class="tab-content">
            <div aria-labelledby="all-tab" class="tab-pane fade in active" id="all" role="tabpanel">
                <div class="eval-box">
                    <div class="eval-author">
                        {{if value.mname==null}}
                        <div class="name" style="margin-top: 50px">用户匿名</div>
                        {{/if}}
                        {{if value.mname!=null}}
                        <div class="name" style="margin-top: 50px">{{value.mname}}</div>
                        {{/if}}
                    </div>
                    <div class="eval-content">
                        <div class="eval-text"style="color: #767474">
                            {{if value.grade==0}}
                            <div >评价等级: 好评</div>
                            {{/if}}
                            {{if value.grade==1}}
                            <p>评价等级: 中评</p>
                            {{/if}}
                            {{if value.grade==2}}
                            <p>评价等级: 差评</p>
                            {{/if}}
                           评价内容: {{value.text}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{/each}}
</script>
<!--加载商品预览图-->
<script id="commtityimage" type="text/template">
    {{each data value}}
    <div class="small-box">
        <img class="cover" src="{{@value.exampleImage1}}" alt="{{@value.cName}}">
        <span class="hover"></span>
    </div>
    <div class="thumbnail-box">
        <a href="javascript:;" class="btn btn-default btn-prev"></a>
        <div class="thumb-list">
            <ul class="wrapper clearfix">
                {{if value.exampleImage1!=null}}
                <li class="item active" data-src="{{value.exampleImage1}}"><img class="cover" src="{{value.exampleImage1}}" alt="商品预览图"></li>
                {{/if}}
                {{if value.exampleImage2!=null}}
                <li class="item active" data-src="{{value.exampleImage2}}"><img class="cover" src="{{value.exampleImage2}}" alt="商品预览图"></li>
                {{/if}}
                {{if value.exampleImage3!=null}}
                <li class="item active" data-src="{{value.exampleImage3}}"><img class="cover" src="{{value.exampleImage3}}" alt="商品预览图"></li>
                {{/if}}
                {{if value.exampleImage4!=null}}
                <li class="item active" data-src="{{value.exampleImage4}}"><img class="cover" src="{{value.exampleImage4}}" alt="商品预览图"></li>
                {{/if}}
                {{if value.exampleImage5!=null}}
                <li class="item active" data-src="{{value.exampleImage5}}"><img class="cover" src="{{value.exampleImage5}}" alt="商品预览图"></li>
                {{/if}}
            </ul>
        </div>
        <a href="javascript:;" class="btn btn-default btn-next"></a>
    </div>
    <div class="big-box"><img src="{{value.exampleImage2}}" alt="{{value.cName}}"></div>
    {{/each}}
</script>
<script id="countsTemplate" type="text/template">
    <li class="item-ind-item">
        <span class="ind-label c9">累计销量</span>
        <span class="ind-count cr">{{datebate.counts}}</span>
    </li>
    <li class="item-ind-item">
        <a href=""><span class="ind-label c9">累计评论</span>
            <span class="ind-count cr">{{datebate.month}}</span></a>
    </li>
</script>
<script th:src="@{/frontstatic/js/jquery.magnifier.js}"></script>
<script>
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    function getimagecommtity() {
        $.get("/getfordcommtityImage", function (result) {
            date = {data: result}
            mera = template("commtityimage", date);
            $("#magnifier").append(mera);
            $(function () {
                $('#magnifier').magnifier();
            });
            $("#commdityText").html(result[0].allText)
        })
    }
    getimagecommtity();

    $(function () {
        var id;
        $('#commdityHrspecs dd ul li a').click(function () {
            $('#commdityHrspecs dd ul li a').removeClass('on');
            $(this).addClass("on").parent().siblings().find("a").removeAttr("class");
            id = $(this).attr('id')
            $.get("/queryspecsskudata", {"id": id}, function (ex) {
                $("#commditiStock").text(ex.stocks)
                $(".price").text(ex.prices)
            })
        })
        $("#shopcommtity").click(function () {
            var count = $("#inputcount").val()
            if (id == null || id == "") {
                notify.warning("请选择")
            } else {
                $.post("/setShopping", {"s_id": id, "counts": count}, function (ex) {
                    if (ex.code!=0) {
                        notify.error(ex.msg)
                    } else {
                        notify.success(ex.msg)
                    }
                })
            }
        })
    })
    
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;
        var count=20;
        var cId= getQueryString("id");
        function getdate(obj){
            $.ajax({
                type : "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url:"/evaluate/page",
                async : true,
                data: JSON.stringify(obj),
                success : function(date){
                    document.getElementById("evaluate").innerHTML = "";
                    count=date.data.total
                    date = {datebate: date.data.records}
                    mera = template("eavteListTemplate", date);
                    $("#evaluate").append(mera);
                }
            })
        }
        var evaluateVo={
            "commtityId":cId,
            "page":1,
            "limit":10
        }
        $.ajax({
            type : "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url:"/evaluate/page",
            async : false,
            data: JSON.stringify(evaluateVo),
            success : function(date){
                count=date.data.total
            }
        })
        //自定义样式
        laypage.render({
            elem: 'demo2'
            ,count: count
            ,limit:10
            ,theme: '#787b7d'
            ,jump: function(obj, first){
                var kindvo1kindvo={
                    "commtityId":cId,
                    "page":obj.curr,
                    "limit":obj.limit
                }
                getdate(kindvo1kindvo)
            }
        });
        function getCumulative(cId) {
            $.get("/evaluate/cumulative",{"cId":cId},function(ex) {
                date = {datebate: ex.data}
                mera = template("countsTemplate", date);
                $("#countsSale").append(mera);
            })
        }
        getCumulative(cId)
    });
</script>
</html>